<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>他的主页</title>
</head>
<jsp:include page="header.jsp"></jsp:include>
<body style="background: rgb(248, 246, 246);">
<div class="container" style="margin-top: 30px">
    <div class="row">
        <!--左侧1/3部分 -->
        <div class="col-md-3" style="background: transparent;box-shadow: -5px 0 5px rgba(0, 0, 0, 0.03)">

            <!--用户头像-->
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <img src="/upload/${requestScope.otherUser.userImg}" width="150" height="150"
                         style="border-radius: 50%;"/>
                </div>
            </div>

            <!-- 关注用户 -->

            <div class="row">
                <div class="col-md-2">
                    <button id="attention_btn" type="button" style="margin-left: 90px;background: transparent;" class="btn btn-default"
                            data-toggle="modal" data-target="#exampleModal">
                        <span class="glyphicon glyphicon-heart"></span>关注
                    </button>
                </div>
            </div>


            <!-- 展示用户资料 -->
            <div class="row" style="padding: 20px;">
                <span class="glyphicon glyphicon-sunglasses">昵称:&nbsp;&nbsp;&nbsp;${requestScope.otherUser.userName}</span>
                <hr>
                <span class="glyphicon glyphicon-heart-empty">关注:&nbsp;&nbsp;&nbsp;${requestScope.otherUser.userAttention}</span>
                <hr>
                <span class="glyphicon glyphicon-paperclip">身份:&nbsp;&nbsp;&nbsp;${requestScope.otherUser.userStatus == 1?"认证学霸":"普通用户"}</span>
                <hr>
                <span class="glyphicon glyphicon-grain">笔记:&nbsp;&nbsp;&nbsp;${requestScope.otherUser.userNoteCount}</span>
            </div>
        </div>

        <!-- 主体2/3部分 -->
        <div class="col-md-8" style="margin-left: 20px;box-shadow: -5px 0 5px rgba(0, 0, 0, 0.03)">

            <c:forEach items="${requestScope.otherNotes}" var="note">
                <div class="row">
                    <div class="thumbnail" style="padding: 10px;background: transparent ">
                        <div class="caption" class="col-md-10 col-md-offset-1">
                            <a href="${pageContext.request.contextPath}/note/getNote?noteId=${note.noteId}"><h3>${note.noteTitle}</h3></a>
                            <p>${note.noteBrief}</p>
                            <p><fmt:formatDate
                                    value="${note.noteDate}"></fmt:formatDate></p>
                            <hr>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
</body>
<script>
    $(document).ready(function () {
        //点击收藏该笔记
        $("#attention_btn").click(function () {
            $.get("/addAttention?userId=${sessionScope.userInfo.userId}&attUserId=${requestScope.otherUser.userId}",function (result) {
                if(result == 'ok'){
                    alert('关注成功');
                    $("attention_btn").addClass("hide");
                }else{
                    alert("关注失败");
                }
            });
        });
    });
</script>

</html>
